<template>
  <div class="footer-nav-box" v-show="showNav" transition="formBottom">
    <div class="nav" :class="{'selected':path==='/index'}" @touchend="selectedNav('/index')">
      <div class="icon device"></div>
      <div class="label">设备</div>
    </div>
    <div class="nav" :class="{'selected':path==='/room'}" @touchend="selectedNav('/room')">
      <div class="icon room"></div>
      <div class="label">房间</div>
    </div>
    <div class="nav" :class="{'selected':path==='/scene'}" @touchend="selectedNav('/scene')">
      <div class="icon scene"></div>
      <div class="label">情景</div>
    </div>
    <div class="nav" :class="{'selected':path==='/setting'}" @touchend="selectedNav('/setting')">
      <div class="icon setting"></div>
      <div class="label">设置</div>
    </div>
  </div>
</template>

<script>
  module.exports = {
    data () {
      return {
        changeNavCount: 0,
        oldTime: 0,
        showNavPaths: ['/index', '/room', '/scene', '/setting']
      }
    },
    computed: {
      path () {
        return this.$route.path
      },
      showNav () {
        if (this.showNavPaths.indexOf(this.$route.path) >= 0) {
          return true
        } else {
          return false
        }
      }
    },
    methods: {
      selectedNav (path) {
        this.path = path
        this.$route.router.replace(path)
      }
    }
  }
</script>

<style lang="stylus">
  @import "../assets/style/common"

  .footer-nav-box
    width 100%
    height 1.5rem
    background #fff
    position fixed
    bottom 0
    border-top 1px solid #cdcdcd
    clearfix()
    .nav
      width 25%
      height 100%
      float left
      color #5c656e
      box-sizing border-box
      .icon
        width 0.8rem
        height 0.8rem
        margin 0.2rem auto 0
        background no-repeat center bottom
        background-size 100% 100%
      .label
        width 100%
        height 0.5rem
        text-align center
        font-dpr 11px
        line-height 0.4rem
      .device
        background-image url("../../app/assets/images/icons/footer-nav-device.png")
      .room
        background-image url("../../app/assets/images/icons/footer-nav-room.png")
      .scene
        background-image url("../../app/assets/images/icons/footer-nav-scene.png")
      .setting
        background-image url("../../app/assets/images/icons/footer-nav-setting.png")
    .selected
      color #219d9b
      .icon
      .device
        background-image url("../../app/assets/images/icons/footer-nav-device-selected.png")
      .room
        background-image url("../../app/assets/images/icons/footer-nav-room-selected.png")
      .scene
        background-image url("../../app/assets/images/icons/footer-nav-scene-selected.png")
      .setting
        background-image url("../../app/assets/images/icons/footer-nav-setting-selected.png")
</style>
